<!--秒杀免费拿  -->
<template>
  <div class="cheapDetail">
    <!-- 头部 -->
    <header class="cheapDetail_header"><!-- 背景图 --></header>
    <!-- 主体 -->
    <main class="mian_cheapDetail">
      <!-- 上框 -->
      <div class="time_cheapDetail">
        <p>已砍1569.42元,免费拿仅差</p>
        <h2>0.03元</h2>
 
        <div class="progress_bar">
          <div class="progress_box">
            <!-- 进度条内盒子 -->
            <div class="progress_childern"></div>
          </div>
          <!-- 定位内容盒子 -->
          <div class="location">仅剩0.3%</div>
        </div>
        <p @click="$router.push('wx')">
          <span> 预计在邀2人,继续邀请好友 </span>
        </p>
      </div>
      <!-- 下框 -->
      <div class="record_cheapDetail">
        <!-- title -->
        <div class="record_cheapDetail_header">砍价记录</div>
        <!-- 内容区 -->
        <div class="record_cheapDetail_main">
          <dl>
            <dd>
               <img src="../../images/wx/222222.png" alt="">
            </dd>
            <dt>
              <div class="let">
                <b>N_N 游戏</b>
                <p>金币砍一刀</p>
              </div>
              <div><b>砍掉97%</b>（199.00元）</div>
            </dt>
          </dl>
          <dl>
            <dd>
                 <img src="../../images/wx/222222.png" alt="">
            </dd>
            <dt>
              <div class="let">
                <b>N_N 游戏</b>
                <p>金币砍一刀</p>
              </div>
              <div><b>砍掉97%</b> （199.00元）</div>
            </dt>
          </dl>
          <dl>
            <dd>
                  <img src="../../images/wx/222222.png" alt="">
            </dd>
            <dt>
              <div class="let">
                <b>N_N 游戏</b>
                <p>金币砍一刀</p>
              </div>
              <div><b>砍掉97%</b> （199.00元）</div>
            </dt>
          </dl>
          <dl>
            <dd>
                  <img src="../../images/wx/222222.png" alt="">
            </dd>
            <dt>
              <div class="let">
                <b>N_N 游戏</b>
                <p>N_N 游戏</p>
              </div>
              <div><b>砍掉97%</b> （199.00元）</div>
            </dt>
          </dl>
          <dl>
            <dd>
               <img src="../../images/wx/222222.png" alt="">
            </dd>
            <dt>
              <div class="let">
                <b>N_N 游戏</b>
                <p>金币砍一刀</p>
              </div>
              <div><b>砍掉97%</b> （199.00元）</div>
            </dt>
          </dl>
        </div>
      </div>
      <!-- 免费拿 -->
      <!-- <div
        class="download"
        style="display: none"
        :class="isshow === true ? 'active' : ''"
      >
        <svg-icon iconClass="back" class="back_svg" @click="arr1"></svg-icon>
        <img src="../../../src/images/wx/222222.png" alt=""/>
        <span @click="arr2"><svg-icon iconClass="cuo"></svg-icon></span>
        <div class="download_mask">
          <div class="download_mask1"></div>
          <div class="download_mask2">预计1在邀请2人,直接免费拿</div>
          <div class="download_mask3">
            <div class="download_mask33">
              <svg-icon iconClass="add"></svg-icon>
            </div>
            <div class="download_mask33">
              <svg-icon iconClass="add"></svg-icon>
            </div>
          </div>
          <div class="download_mask4">
            <div>去微信邀请好友帮忙砍价</div>
          </div>
        </div>
      </div> -->
    </main>
  </div>
</template>

<script>
import '../../assets/css/style.scss'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isshow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    dianji() {
      console.log(111);
      this.isshow = !this.isshow;
      console.log(this.isshow);
    },
    arr1() {
      console.log(1);
      this.isshow = false;
    },
    arr2() {
      console.log(2);
      this.isshow = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.isshow) {
      window.localStorage.setItem("share");
    } 
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>

.cheapDetail {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  //   头
  .cheapDetail_header {
    width: 100%;
    height: 300px;
    background-image: url(../../../src/images/wx/122323@2x_02.jpg);
    background-size: 100% 100%;
  }
  // 主体
  .mian_cheapDetail {
    flex: 1;
    padding: 0 px2rem(16);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    overflow: hidden;
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from(#941b1d),
      to(#dd7e4b)
    );
    //   上框
    .time_cheapDetail{
      width: 100%;
      height: px2rem(145);
      background: #ffe1d8;
      margin-bottom: px2rem(16);
      border-radius: px2rem(8);
      padding: px2rem(20);
      text-align: center;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      p {
        font-size: px2rem(12);
        color: #c62c2c;
        font-weight: 600;
      }
      .holding {
        font-size: px2rem(14);
        margin-top: px2rem(2);
        span {
          display: inline-block;
          border-radius: 5px;
          padding: px2rem(4) px2rem(4);
        }
      }
      h2 {
        font-size: px2rem(32);
        color: #c62c2c;
        font-weight: 600;
      }
      //   进度条
      .progress_bar {
        flex: 1;
        padding-top: 20px;
        position: relative;
        .progress_box {
          width: 100%;
          height: px2rem(12);
          background: #e8aa9b;
          border-radius: px2rem(5);
          overflow: hidden;
          // 进度条内长度
          .progress_childern {
            height: 100%;
            width: 97%;
            border-radius: px2rem(5);
            background: #c6502c;
          }
        }
        .location {
          position: absolute;
          left: 80%;
          top: px2rem(-5);
          height: px2rem(16);
          width: px2rem(70);
          background: #c62c2c;
          font-size: px2rem(12);
          color: #fff;
          line-height: px2rem(16);
          border-radius: px2rem(5);
        }

        .location:after,
        .location:before {
          border: solid transparent;
          content: " ";
          height: 0;
          top: 100%;
          position: absolute;
          width: 0;
        }

        .location:after {
          border-width: 6px;
          border-top-color: #c62c2c;
          left: 20px;
        }

        .location:before {
          border-width: 12px;
          //   border-top-color: #000;
          //   left: 18px;
        }
      }
    }
    .active {
      display: block !important;
    }
    //弹出框
    .download {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      > svg-icon {
        z-index: 999;
      }

      > .back_svg {
        color: #ccc;
        padding-left: 20px;
        font-size: 50px;
      }
      > span {
        position: relative;
        left: 60%;
        top: 19%;
        width: px2rem(30);
        height: px2rem(30);
        border-radius: 50%;
        background: rgba(201, 197, 141, 0.801);
        font-size: px2rem(23);
        z-index: 999;
        display: inline-block;
        color: #fff;
        padding: 3px;
      }
      > img {
        position: relative;
        width: px2rem(60);
        height: px2rem(60);
        border-radius: 50%;
        top: 20%;
        left: 33%;
        z-index: 999;
      }
      .download_mask {
        width: px2rem(319);
        height: px2rem(324);
        background: #f1fcb7;
        position: absolute;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto;
        border-radius: 10px;
        .download_mask1 {
          width: 100%;
          height: px2rem(45);
          // background: cornflowerblue;
        }
        .download_mask2 {
          width: 100%;
          height: px2rem(25);
          font-size: px2rem(15);
          color: #6e3c0f;
          text-align: center;
          line-height: px2rem(25);
          font-weight: 800;
        }
        .download_mask3 {
          width: 100%;
          height: px2rem(180);
          // background: cornflowerblue;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          .download_mask33 {
            width: px2rem(70);
            height: px2rem(70);
            border: 1px dashed rgb(187, 177, 177);
            // background: rgb(9, 255, 0);
            border-radius: 50%;
            text-align: center;
            font-size: px2rem(30);
            line-height: px2rem(70);
          }
        }
        .download_mask4 {
          width: 100%;
          height: px2rem(75);
          div {
            margin-left: 16px;
            width: px2rem(285);
            height: px2rem(40);
            background: #e06044;
            display: inline-block;
            border-radius: 20px;
            font-size: px2rem(15);
            color: rgb(236, 228, 228);
            text-align: center;
            line-height: px2rem(40);
          }
        }
      }
    }
    //下框
    .record_cheapDetail {
      //   flex: 1;
      height: 100%;
      width: 100%;
      background: #ffe1d8;
      border-radius: px2rem(8);
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .record_cheapDetail_header {
        height: px2rem(40);
        background: #ca8e78;
        font-size: px2rem(16);
        line-height: px2rem(40);
        padding-left: px2rem(30);
        color: #fff;
      }
      .record_cheapDetail_main {
        flex: 1;
        overflow-y: auto;
        font-size: px2rem(12);
        b {
          font-size: px2rem(14);
          color: #b74829;
        }
        dl {
          height: px2rem(80);
          width: 100%;
          display: flex;
          padding: px2rem(20);
          align-items: center;
          dd {
            width: px2rem(40);
            height: px2rem(40);
            margin-right: px2rem(5);
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          dt {
            flex: 1;
            display: flex;
            justify-content: space-between;
            color: #af7964;
          }
        }
      }
    }
  }
}
</style>
